import { ModalForm, ProFormText } from '@ant-design/pro-form';

import React from 'react';

import type { AddItem } from '../data';

interface AddFormProps {
  onSubmit: (values: AddItem) => void;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
}

const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
};

const AddForm: React.FC<AddFormProps> = (props) => {
  const { onSubmit, onCancel = () => {}, modalVisible } = props;

  const onModalOk = async (formData: Record<string, any>) => {
    const fieldsValue = formData as AddItem;
    onSubmit(fieldsValue);
    return true;
  };

  return (
    <ModalForm<AddItem>
      title="新建权限"
      visible={modalVisible}
      onFinish={onModalOk}
      onVisibleChange={(visible) => onCancel && onCancel(visible)}
      submitTimeout={1000}
      {...formItemLayout}
      layout="horizontal"
    >
      <ProFormText
        width={'sm'}
        name="code"
        label="编码"
        rules={[{ required: true, message: '必填' }]}
      />
      <ProFormText
        width={'sm'}
        name="name"
        label="名称"
        rules={[{ required: true, message: '必填' }]}
      />
    </ModalForm>
  );
};
export default AddForm;
